<template>
	<view class="product" @click="toDetail">
		<wd-img width="330rpx" height="330rpx" :src="props.product?.skuImageUrl" />
		<view class="name ellipsis-2">
			{{ props.product?.goodsName }}
		</view>
		<view class="price">
			<text>{{ usePrice(props.product?.price, props.currency) }}</text>
			<text>x{{ props.product?.number }}</text>
		</view>
	</view>
</template>
<script setup>
import usePrice from '@/hooks/usePrice'

const props = defineProps({
	product: {
		type: Object,
		default: () => ({}),
	},
	currency: {
		type: Object,
		default: null,
	},
})
const toDetail = () => {
	uni.navigateTo({ url: '/pages/product/index?id=' + props.product.offerId })
}
</script>
<style scoped lang="scss">
.product {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;

	width: 330rpx;
	height: 490rpx;
	background-color: #fff;
	box-shadow: 0 0 10rpx #fff;

	.name {
		box-sizing: border-box;

		width: 100%;
		padding: 0 18rpx;
		font-size: 28rpx;
		line-height: 42rpx;
		color: #333;
		text-align: left;
	}

	.price {
		box-sizing: border-box;
		flex: 1;
		width: 100%;
		padding: 12rpx;

		margin-top: 40rpx;
		font-size: 24rpx;
		color: #cc302d;
		text-align: left;

		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
}
</style>
